<template>
  <div class="moreService-container">
    <div class="moreService-con">
      <div class="moreService-con-title">企业服务</div>
      <ul>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhuangxiufuwu"></use>
            </svg>
          </div>
          <span>装修服务</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-bangong"></use>
            </svg>
          </div>
          <span>办公服务</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-huiyifuwu"></use>
            </svg>
          </div>
          <span>会议服务</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-anquanfuwu"></use>
            </svg>
          </div>
          <span>安全服务</span>
        </li>
      </ul>
    </div>
    <div class="moreService-con">
      <div class="moreService-con-title">产业服务</div>
      <ul>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhengwufuwu"></use>
            </svg>
          </div>
          <span>政务服务</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-biaoqian-"></use>
            </svg>
          </div>
          <span>金融服务</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhengcefuwu"></use>
            </svg>
          </div>
          <span>政策服务</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-fawufuwu"></use>
            </svg>
          </div>
          <span>法务服务</span>
        </li>
      </ul>
    </div>
    <div class="moreService-con">
      <div class="moreService-con-title">生活服务</div>
      <ul>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-canyinfuwu"></use>
            </svg>
          </div>
          <span>餐饮服务</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiaotongfuwu"></use>
            </svg>
          </div>
          <span>交通服务</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shejiaofuwu"></use>
            </svg>
          </div>
          <span>社交服务</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tongxunfuwu"></use>
            </svg>
          </div>
          <span>通讯服务</span>
        </li>
      </ul>
    </div>
    <div class="moreService-con">
      <div class="moreService-con-title">物业服务</div>
      <ul>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-baoshibaoxiu"></use>
            </svg>
          </div>
          <span>报事报修</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-kehufuwukefu"></use>
            </svg>
          </div>
          <span>客户服务</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-huiyiyuding"></use>
            </svg>
          </div>
          <span>会议预定</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-_xiaofanganquan"></use>
            </svg>
          </div>
          <span>消防安全</span>
        </li>
      </ul>
    </div>
    <div class="moreService-con">
      <div class="moreService-con-title">安防管理</div>
      <ul>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shipinjiankong"></use>
            </svg>
          </div>
          <span>视频监控</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-menjinguanlihover"></use>
            </svg>
          </div>
          <span>门禁管理</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiaofangjiance"></use>
            </svg>
          </div>
          <span>消防检测</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-baoshibaoxiu"></use>
            </svg>
          </div>
          <span>上门检修</span>
        </li>
      </ul>
    </div>
    <div class="moreService-con">
      <div class="moreService-con-title">环境管理</div>
      <ul>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-mianxingtubiao_baojieguanli1"></use>
            </svg>
          </div>
          <span>保洁管理</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-lvzhi"></use>
            </svg>
          </div>
          <span>绿植管理</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-icn_huanjingjiankong"></use>
            </svg>
          </div>
          <span>环境监控</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shebeigenghuan"></use>
            </svg>
          </div>
          <span>设备更换</span>
        </li>
      </ul>
    </div>
    <div class="moreService-con">
      <div class="moreService-con-title">通行管理</div>
      <ul>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-fangke_fangkeguanli"></use>
            </svg>
          </div>
          <span>访客管理</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-anquanfuwu"></use>
            </svg>
          </div>
          <span>车辆通行</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-cheweiyindao"></use>
            </svg>
          </div>
          <span>车位引导</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-icon_menweiguanli"></use>
            </svg>
          </div>
          <span>门卫管理</span>
        </li>
      </ul>
    </div>
    <div class="moreService-con">
      <div class="moreService-con-title">设施管理</div>
      <ul>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhaomingguanli"></use>
            </svg>
          </div>
          <span>照明管理</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-nenghaoguanli"></use>
            </svg>
          </div>
          <span>能耗管理</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-cheweiguanli"></use>
            </svg>
          </div>
          <span>车位管理</span>
        </li>
        <li>
          <div class="icon-con">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiaofangsheshi-"></use>
            </svg>
          </div>
          <span>消防设施管理</span>
        </li>
      </ul>
    </div>


    <van-tabs v-model:active="active" swipeable  v-if="false">
      <van-tab title="园区服务运营服务">
        <div class="moreService-con">
          <div class="moreService-con-title">企业服务</div>
          <ul>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>装修服务</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>办公服务</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>会议服务</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>安全服务</span>
            </li>
          </ul>
        </div>
        <div class="moreService-con">
          <div class="moreService-con-title">产业服务</div>
          <ul>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>政务服务</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>金融服务</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>政策服务</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>法务服务</span>
            </li>
          </ul>
        </div>
        <div class="moreService-con">
          <div class="moreService-con-title">生活服务</div>
          <ul>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>餐饮服务</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>交通服务</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>社交服务</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>通讯服务</span>
            </li>
          </ul>
        </div>
        <div class="moreService-con">
          <div class="moreService-con-title">物业服务</div>
          <ul>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>报事报修</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>客户服务</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>会议预定</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>消防安全</span>
            </li>
          </ul>
        </div>
      </van-tab>
      <van-tab title="园区综合运营管理">
        <div class="moreService-con">
          <div class="moreService-con-title">安防管理</div>
          <ul>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>视频监控</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>门禁管理</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>消防检测</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>上门检修</span>
            </li>
          </ul>
        </div>
        <div class="moreService-con">
          <div class="moreService-con-title">环境管理</div>
          <ul>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>保洁管理</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>绿植管理</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>环境监控</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>设备更换</span>
            </li>
          </ul>
        </div>
        <div class="moreService-con">
          <div class="moreService-con-title">通行管理</div>
          <ul>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>访客管理</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>车辆通行</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>车位引导</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>门卫管理</span>
            </li>
          </ul>
        </div>
        <div class="moreService-con">
          <div class="moreService-con-title">设施管理</div>
          <ul>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>照明管理</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>能耗管理</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>车位管理</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>消防设施管理</span>
            </li>
          </ul>
        </div>
      </van-tab>
      <van-tab title="业务办理" >
        <div class="moreService-con">
          <div class="moreService-con-title">共享系统</div>
          <ul>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>入职产品</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>呼叫中心</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>电子证明</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>政策申报</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>离职产品</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>调动产品</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>换签产品</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>企政通</span>
            </li>
          </ul>
        </div>
        <div class="moreService-con">
          <div class="moreService-con-title">人力系统</div>
          <ul>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>人事档案</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>政务管理</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>公司管理</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>组织管理</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>岗位管理</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>编制管理</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>社工产品</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>薪酬档案</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>薪酬核算</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>报表中心</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>福利管理</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>假期管理</span>
            </li>
          </ul>
        </div>
        <div class="moreService-con">
          <div class="moreService-con-title">考勤系统</div>
          <ul>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>考勤日历</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>排班管理</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>实时计算</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>考勤结果</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>请假管理</span>
            </li>
            <li>
              <div class="icon-con">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-rengongfuwu2"></use>
                </svg>
              </div>
              <span>加班管理</span>
            </li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const active = ref(0)
</script>

<style scoped lang="less">
  .moreService-container {
    padding: 10px;
    .moreService-con {
      margin: 20px auto;
      box-shadow: 0px 0px 20px #ccc;
      padding: 10px;
      border-radius: 5px;
      .moreService-con-title {
        border-left: 4px solid #0081ff;
        padding-left: 10px;
        font-size: 20px;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          //width: calc((100% - 0px) / 4);
          flex: 0 0 calc((100% - 10px)/4);
          display: flex;
          flex-direction: column;
          margin-top: 20px;
          .icon-con {
            display: flex;
            justify-content: center;
          }
          span {
            text-align: center;
            margin-top: 10px;
          }
        }
      }
    }
  }
</style>
